<template>
  <view class="living_bill_detail_box">
    <view class="content">
      <binaryLayout
        :size="28"
        left-text="账单编号"
        :right-text="`${props.data?.billId}`"
      />
      <binaryLayout
        :size="28"
        left-text="水费"
        :right-text="`${format.priceHandler(info?.watersFees, '元')}`"
      />
      <binaryLayout
        :size="28"
        left-text="电费"
        :right-text="`${format.priceHandler(info?.tariffFees, '元')}`"
      />
      <binaryLayout
        :size="28"
        left-text="天然气费"
        :right-text="`${format.priceHandler(info?.cngFees, '元')}`"
      />
      <binaryLayout
        :size="28"
        left-text="金额小计"
        :right-text="`${format.priceHandler(props.data?.billPrice, '元')}`"
      />
      <binaryLayout
        :size="28"
        left-text="物业地址"
        :right-text="`${info?.propertyAddress}`"
      />
      <binaryLayout
        :size="28"
        left-text="支付方式"
        :right-text="`${
          getEnumValue(props.data?.paymentMethods) ?? BillSateEnum.WAIN_PAID
        } `"
      />
      <binaryLayout
        :size="28"
        v-if="props.data?.billPayTime"
        left-text="支付时间"
        :right-text="`${props.data?.billPayTime}`"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import type { PageBill, PageBillByLife } from '@/config/data/data'
import { BillSateEnum, getEnumValue } from '@/config/enum/enum'
import format from '@/util/format'
import { computed, type PropType } from 'vue'

//接受父组件参数
const props = defineProps({
  data: {
    type: Object as PropType<PageBill>,
    default: {
      watersFees: 0,
      tariffFees: 0,
      cngFees: 0,
      propertyAddress: '',
    },
  },
})

const info = computed(() => {
  return props.data?.billContent as unknown as PageBillByLife
})
</script>

<style scoped lang="scss">
.living_bill_detail_box {
  padding: 0 30rpx;
  width: calc(100% - 60rpx);
  min-height: 100%;
  background-color: $uni-bg-color-grey;

  .content {
    width: 100%;
    background-color: $uni-bg-color;
    margin-bottom: 30rpx;
  }
}
</style>
